<!-- 定义组件的 HTML 结构 -->
<template>
  <!-- 包裹整个立方体的容器 -->
  <div class="wraper" ref="wrapperRef">
    <!-- 立方体本身 -->
    <div class="cube" ref="cubeRef">
      <!-- 立方体的六个面 -->
      <div class="front" :style="{ backgroundImage: 'url(' + frontBackgroundImage + ')' }">前</div>
      <div class="end">后</div>
      <div class="left">左</div>
      <div class="right">右</div>
      <div class="top">上</div>
      <div class="bottom">下</div>
    </div>
  </div>
</template>

<!-- 定义组件的 JavaScript 逻辑 -->
<script setup lang="ts">
// 导入 Vue 的功能模块
import { onMounted, ref } from 'vue';

// 定义包裹容器的引用
const wrapperRef = ref(null);
// 定义立方体本身的引用
const cubeRef = ref(null);

// X 轴旋转角度
let degX = 0;
// Y 轴旋转角度
let degY = 0;
// 用于缩放的变量
let n = 1000;
// 是否正在拖动状态
let isDragging = false;
// 上一次鼠标位置的 X 坐标
let lastX = 0;
// 上一次鼠标位置的 Y 坐标
let lastY = 0;

// 前面背景图的 URL
const frontBackgroundImage = 'https://www.toopic.cn/public/uploads/small/169139790585716913979057.jpg';

// 鼠标按下事件处理函数
function handleMouseDown(e: MouseEvent) {
  isDragging = true;
  lastX = e.clientX;
  lastY = e.clientY;
}

// 鼠标移动事件处理函数
function handleMouseMove(e: MouseEvent) {
  if (!isDragging) return;

  let moveX = e.clientX - lastX;
  let moveY = e.clientY - lastY;
  degX += moveX / 5;
  degY -= moveY / 5;

  // 更新立方体的旋转
  cubeRef.value!.style.transform = `rotateX(${degY}deg) rotateY(${degX}deg)`;

  // 更新上次鼠标位置
  lastX = e.clientX;
  lastY = e.clientY;
}

// 鼠标抬起事件处理函数
function handleMouseUp() {
  isDragging = false;
}

// 鼠标滚轮事件处理函数
function handleMouseWheel(e: WheelEvent) {
  if (e.deltaY < 0) {
    n -= 50;
    if (n > 350) {
      wrapperRef.value!.style.perspective = `${n - 50}px`;
      n -= 50;
    }
  } else {
    n += 50;
    wrapperRef.value!.style.perspective = `${n + 50}px`;
    n += 50;
  }
}

// 组件挂载完成后触发的钩子函数
onMounted(() => {
  // 添加鼠标按下事件监听器
  wrapperRef.value!.addEventListener('mousedown', handleMouseDown);
  // 添加鼠标移动事件监听器
  document.addEventListener('mousemove', handleMouseMove);
  // 添加鼠标抬起事件监听器
  document.addEventListener('mouseup', handleMouseUp);
  // 添加鼠标滚轮事件监听器
  wrapperRef.value!.addEventListener('mousewheel', handleMouseWheel);

  // 清理事件监听器
  return () => {
    wrapperRef.value!.removeEventListener('mousedown', handleMouseDown);
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
    wrapperRef.value!.removeEventListener('mousewheel', handleMouseWheel);
  };
});

// 变量控制立方体是否可见
const isVisible=ref(true)

// 切换立方体的显示状态
const toggleBox = () => {
    isVisible.value = !isVisible.value;
};

// onMounted 中预留的未实现的函数
// onMounted(() => {
//   // a()
// })
</script>

<!-- 定义组件的样式 -->
<style scoped>
/* // 外层容器样式 */
.dragAll {
  height: 90%;
  width:49.8%;
  /* padding: 0;
  margin: 0; */
  /*将border和padding绘制在设置宽高之内,当你设置一个元素的宽度时，你不需要担心内边距和边框会使元素变宽。*/
  /* box-sizing: border-box;
  overflow: hidden; */
  float:left;
  /* background-color:red; */
  border: 0.5px solid #000000;
}
/* // 立方体容器样式 */
.wraper {
  width: 260px;
  height: 260px;
  margin: 128px auto;
  /*景深，可以理解为视角到3D物体的距离，设置于舞台元素上*/
  perspective: 1000px;
  /* background-color:red; */
}
/* // 立方体样式 */
.cube {
  height: 100%;
  width: 100%;
  position: relative;
  /*子元素继承3D效果*/
  transform-style: preserve-3d;
  /*加上下边这句可以体现出立体感*/
  transform: rotateX(-15deg) rotateY(-45deg);
}
/* // 六个面的通用样式 */
.cube > div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color:green;
  text-align: center;
  line-height: 260px;
  color: #fff;
  font-size: 48px;
  border: 0.5px solid #fff;
  /*设置文本内容不可选*/
  user-select: none;
}
/* // 前面样式 */
.front {
  /*正面不用旋转，直接向前平移半个盒子宽*/
  transform: translateZ(130px);
}
/* // 后面样式 */
.end {
  /*向后旋转，以确保盒子上的文字朝向盒子外*/
  transform: rotateY(180deg) translateZ(130px);
}
/* // 顶面样式 */
.top {
  transform: rotateX(90deg) translateZ(130px);
}
/* // 底面样式 */
.bottom {
  transform: rotateX(-90deg) translateZ(130px);
}
/* // 左面样式 */
.left {
  transform: rotateY(-90deg) translateZ(130px);
}
/* // 右面样式 */
.right {
  transform: rotateY(90deg) translateZ(130px);
}
</style>